<div id="tb<?php echo $uniqid;?>" class="easyui-panel" style="padding:5px">
  <table class="datagrid-toolbar" cellspacing="0" cellpadding="0" style="padding:5px 10px !important; background: none; border-bottom:none;">
    <tbody>
    <tr>
      <td colspan="4" style="padding-bottom: 5px;">
        <a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
                class="l-btn-text">重载</span></span></a>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
              @click="filter('all')"><span class="l-btn-text">全部</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='waiting'?'selected':''"
              @click="filter('waiting')"><span class="l-btn-text">待审核</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='processing'?'selected':''"
              @click="filter('processing')"><span class="l-btn-text">处理中</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='solved'?'selected':''"
              @click="filter('solved')"><span class="l-btn-text">已打款</span></span>
        <span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='refuse'?'selected':''"
              @click="filter('refuse')"><span class="l-btn-text">已拒绝</span></span>
      </td>
    </tr>
    <tr>
      <td style="padding: 0 10px;"><span style="line-height:30px;">申请日期：</span>
        <input id="applyStartOn" v-model="params.apply_start" style="width:110px" type="text"
               class="easyui-datebox"> </input>至
        <input id="applyEndOn" v-model="params.apply_end" style="width:110px" type="text"
               class="easyui-datebox"> </input>
      </td>
      <td style="padding: 0 10px;"><span style="line-height:30px;">处理日期：</span>
        <input id="optionStartOn" v-model="params.option_start" style="width:110px" type="text"
               class="easyui-datebox"> </input>至
        <input id="optionEndOn" v-model="params.option_end" style="width:110px" type="text"
               class="easyui-datebox"> </input>
      </td>
      <td style="padding: 0 10px;">
        <select v-model="params.apply_type" @change="changeApplyType" class="forminput inputstyle textbox-text validatebox-text" style="width:100px">
          <option value="all">全部提现方式</option>
          <option value="bank">银行卡</option>
          <option value="wechat">微信零钱</option>
          <option value="alipay">支付宝</option>
        </select>
        <select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text" @change="keywordsTypeChange" style="width:120px; border-color: #cccccc !important;">
          <option value="user_id">用户ID</option>
          <option value="user_phone">用户手机号</option>
        </select>
        <input v-model="params.keywords" placeholder="请输入内容" @keyup.enter="init"
                            class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox keywords_input_search_box"
                            type="text"> </input>
      </td>
      <td>
        <a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
              class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
              class="l-btn-text">查询</span></span></a>
        <a href="javascript:void(0);" @click="reset" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxinrefresh39"></i><span
                class="l-btn-text">重置</span></span></a>
        <a href="javascript:void(0);" @click="allExport" class="l-btn l-btn-small l-btn-plain"><span
                class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
                class="l-btn-text">导出</span></span></a>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<div class="con"  style="-moz-user-select:none;">
  <table id="walletapply"></table>
</div>
<div id="walletapplydlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>
<script>
  var walletapplyVm = new Vue({
    el: '#tb<?php echo $uniqid;?>',
    data: {
      params: {
        apply_start: '',
        apply_end: '',
        option_start: '',
        option_end: '',
        keywords: '',
        keywordsType:'user_id',
        mode: 'all',
        apply_type:'all',
      },
      defParams: {
        apply_start: '',
        apply_end: '',
        option_start: '',
        option_end: '',
        keywords: '',
        keywordsType:'user_id',
        mode: 'all',
        apply_type:'all',
      },
      initLoad:false,
    },
    filters: {
      formatDate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      }
    },
    mounted() {
      setTimeout(()=>{
        this.mounted();
      }, 200);
    },
    methods: {
      mounted: function (){
        $('#tb<?php echo $uniqid;?> #applyStartOn').datebox('setValue', this.params.apply_start);
        $('#tb<?php echo $uniqid;?> #applyEndOn').datebox('setValue', this.params.apply_end);
        $('#tb<?php echo $uniqid;?> #optionStartOn').datebox('setValue', this.params.option_start);
        $('#tb<?php echo $uniqid;?> #optionEndOn').datebox('setValue', this.params.option_end);
        this.init();
      },
      init: function () {
        this.params.apply_start = $('#tb<?php echo $uniqid;?> #applyStartOn').datebox('getValue');
        this.params.apply_end = $('#tb<?php echo $uniqid;?> #applyEndOn').datebox('getValue');
        this.params.option_start = $('#tb<?php echo $uniqid;?> #optionStartOn').datebox('getValue');
        this.params.option_end = $('#tb<?php echo $uniqid;?> #optionEndOn').datebox('getValue');
        if(this.params.keywordsType == 'user_phone'){
          if(this.params.keywords.length > 0 && this.params.keywords.length < 4){
            $('#tb<?php echo $uniqid;?> .keywords_input_search_box').focus().tooltip({
              position: 'top',
              content: '<span style="color:#ff0000">查询时，用户手机号不能少于4位数！</span>',
            });
            return false;
          }
        }
        walletapplyReload();
      },
      changeApplyType(){
        this.init();
      },
      filter(mode) {
        this.params.mode = mode;
        this.init();
      },
      keywordsTypeChange: function (e){
        let placeholder = '请输入内容';
        if(this.params.keywordsType == 'user_phone'){
          placeholder = '用户手机号不能少于4位数';
        }
        $('#tb<?php echo $uniqid;?> .keywords_input_search_box').attr('placeholder',placeholder);
      },
      reset:function (){
        this.params = JSON.parse(JSON.stringify(this.defParams));
        this.mounted();
      },
      allExport:function () {
        showLoading('.con');
        $.post('/admin/walletapply/export', {
          keywordsType: this.params.keywordsType,
          keywords: this.params.keywords,
          start_on: this.params.apply_start,
          end_on: this.params.apply_end,
          option_start_on: this.params.option_start,
          option_end_on: this.params.option_end,
          mode: this.params.mode,
          apply_type:this.params.apply_type,
        }, function (data) {
          hideLoading();
          if (parseInt(data.ret) === 0) {
            $.messager.show({
              title: '提示',
              msg: data.msg,
              timeout: 3000,
              showType: 'slide'
            });
            eventmaterialDownload(data.data);
          } else {
            $.messager.alert('提示', data.msg, 'warning');
          }
        }, 'json').fail((response)=> {
          hideLoading();
          $.messager.alert('提示', response.responseText, 'warning');
        });
      },
    }
  });
  
  var walletapplyReload = function () {
    if(walletapplyVm.initLoad){
      walletapplyVm.initLoad = false;
    }else{
      $("#walletapply").datagrid('load', walletapplyVm.params);
    }
  };
  var walletapplySuccess = function (opt_id){
    if (opt_id) {
      $.messager.confirm('提示', '<span style="color: #36c705; font-weight: bold; font-size: 1.1em;">确定 同意提现申请&完成打款？</span>', function (r) {
        if(r){
          $.messager.progress();
          $.post('/admin/walletapply/applysuccess', {id: opt_id}, function (data) {
            $.messager.progress('close');
            if (data.ret === 0) {
              $.messager.show({
                title: '提示',
                msg: data.msg,
                timeout: 3000,
                showType: 'slide'
              });
              walletapplyReload();
            } else {
              $.messager.alert('提示', data.msg, 'error');
            }
          }, 'json');
        }
      });
    }
  };

  var walletapplyRefuse = function (opt_id) {
    if (opt_id) {
      $.messager.confirm('提示', '<span style="color: #d51313; font-weight: bold; font-size: 1.1em;">确定 拒绝提现申请？</span>', function (r) {
        if (r) {
          $.messager.prompt('拒绝用户提现提示', '请输入拒绝原因！', function (remark){
            if('undefined' !== typeof(remark)){
              let new_remark = (remark.length === 0)?'无':remark;
              $.messager.progress();
              $.post('/admin/walletapply/applyrefuse', {id: opt_id, remark: new_remark}, function (data) {
                $.messager.progress('close');
                if (data.ret === 0) {
                  $.messager.show({
                    title: '提示',
                    msg: data.msg,
                    timeout: 3000,
                    showType: 'slide'
                  });
                  walletapplyReload();
                } else {
                  $.messager.alert('出错', data.msg, 'error');
                }
              }, 'json');
            }
          });
        }
      });
    } else {
      $.messager.alert('提示', '请先选择要拒绝的行！', 'warning');
    }
  };
  var walletapplySearch = function () {
    var height = $(window).height() - $(".top").height() - 46;
    var width = $(window).width() - $(".leftmenu").width() - 8;
    $("#walletapply").datagrid({
      title: '用户提现管理',
      width: width,
      height: height,//高度
      singleSelect: true,//如果为true，则只允许选择一行
      striped: true,//是否显示斑马线效果。
      rownumbers: false,//如果为true，则显示一个行号列。
      pagination: true,//是否显示分页
      pageSize: 10,
      pageList: [10, 20, 50, 100],
      method: 'post',
      sortName: 'created_at',
      sortOrder: 'desc',
      idField: 'id',
      url: '/admin/walletapply/index',
      queryParams: walletapplyVm.params,
      fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
      nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
      selectOnCheck: false,
      checkOnSelect: true,
      loadMsg:'正在处理，请稍后。。。',
      toolbar: '#tb<?php echo $uniqid;?>',
      columns: [[
        {field:'id',title:'ID', width: fixWidth(5), align: "center", halign: 'center'},
        {field:'member',title:'申请用户', width: fixWidth(20), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            let content = '';
            if(value){
              if(value.avatar){
                content += '<div style="display: flex" class="touxiang_wenzi">';
                content += '<div style="width: 32px; display: flex; align-items: center;"><img style="width: 30px; height: 30px; border-radius: 50%; border:1px solid #eee; overflow: hidden;" src="'+value.avatar+'"></div>';
                content += '<div style="width: calc(100% - 42px); padding-left: 10px;">';
              }else{
                content += '<div class="touxiang_wenzi">';
              }
              content += '用户ID：<span>'+rowData.member_id+'</span><br>';
              if(value.realname){
                content += '昵称(姓名)：<span>'+value.nickname+'('+value.realname+')</span><br>';
              }else{
                content += '昵称：<span>'+value.nickname+'</span><br>';
              }
              content += '手机号：<span>'+value.phone+'</span>';
              if(value.avatar){content += '</div>';}
              content += '</div>';
            }
            return content;
          }},
        {field:'money',title:'实际到账/提现金额', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
              return  parseFloat(rowData.actual_money)+ '元' + ' / '+ parseFloat(value) + '元';
          }},
        {field:'payable_money',title:'应付金额', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            return  '<span style="color: #ee650c;">'+parseFloat(value)+ '元</span>';
          }},
        {field:'charge_money',title:'手续费（费率）', width: fixWidth(8), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex){
            return  parseFloat(value)+ '元' + '(' + parseFloat(rowData.service_fee*100) + '%)';
          }},
        {field:'apply_type_text',title:'提现方式', width: fixWidth(5), align: "center", halign: 'center'},
        {field:'apply_info_text',title:'打款信息', width: fixWidth(20), align: "left", halign: 'center'},
        {field:'created_at',title:'申请时间', width: fixWidth(10), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value.replace(/\s/g, "<br>"):'--';
          }},
        {field:'updated_at',title:'操作时间', width: fixWidth(10), align: "left", halign: 'center',formatter:function (value,rowData,rowIndex){
            return value?value.replace(/\s/g, "<br>"):'--';
          }},
        {field:'status_name',title:'状态', width: fixWidth(10), align: "center", halign: 'center',formatter:function (value,rowData,rowIndex){
            let status_con = '<div style="display: flex; flex-direction:column; width: 100%;"><div class="status_'+rowData.status+'" style="width: 100%; text-align: center;">'+value+'</div>';
            if(rowData.status == '-1'){
              status_con += '<div style="width:100%; text-align: left; white-space: pre-wrap;">拒绝原因：'+rowData.remark+'</div></div>';
            }
            return status_con
          }},

        {field: 'options', title: '操作', width: fixWidth(20), align: "center", halign: 'center', formatter: function (value, rowData, rowIndex) {
            let buttons = '<div class="table">';
            if(rowData.status == 0){
              buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" onclick="walletapplySuccess(\'' + rowData.id + '\')"><span class="l-btn-text">同意&打款</span></span>';
              buttons += '<span class="l-btn l-btn-small l-btn-left color9 table" onclick="walletapplyRefuse(\'' + rowData.id + '\')"><span class="l-btn-text">拒绝</span></span>';
            }
            return buttons + '</div>';
          }},
      ]],
    });
    walletapplyVm.initLoad = true;
  };
  onDatagridResize("#walletapply");
  walletapplySearch();
</script>
<style>
  .status_0{
    color: #333333;
  }
  .status_1{
    color: #ee650c;
  }
  .status_2{
    color: #0eb913;
  }
  .status_-1{
    color: #9f1807;
  }

  .l-btn-plain{
    border: rgba(0,0,0,0) 1px solid;
  }

  .datagrid-body-row td{
    line-height: 1.8em !important;
  }

  .datagrid-row td{
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.8em !important;
  }

  .datagrid-toolbar .selected {
    color: #f1f1f1;
    background: #1065a7;
    border: 1px solid #f0f0f0;
  }

  .touxiang_wenzi span{
    color: #007293;
  }

  .keywords_input_search_box{
    width: 300px;
    border-color: #cccccc;
  }
</style>
